<template>
    <section :class="['sign-dialog f-pf',isShow && 'sign-show']">
        <div class="sign-main f-bgw f-pf">
            <img src="@/assets/sign.png" class="sign-img">
            <div class="sign-main-content">
                <h4 class="f-dfc">{{signTitle[signType]}}
                    <i class="f-fx1 f-tar f-c666 f-fs14 f-csp" @click="signChang(1)" v-if="signType===0">没有账号，去注册</i>
                    <i class="f-fx1 f-tar f-c666 f-fs14 f-csp" @click="signChang(0)" v-if="signType===1">已有账号，去登录</i>
                    <i class="f-fx1 f-tar f-c666 f-fs14 f-csp" @click="signChang(0)" v-if="signType===2">返回登录</i>
                </h4>
                <p class="sign-role f-dfc f-fs14" v-if="signType===1">选择角色&emsp;
                    <span class="sign-radio f-ib f-pr">
                        <input name="usertype" type="radio" checked class="f-pa f-w100 f-csp f-db" v-model="usertype" value="1">
                        <label for="usertype">抖音达人</label>
                    </span>
                    <span class="sign-radio f-ib f-pr">
                        <input name="usertype" type="radio" class="f-pa f-csp f-w100 f-db" v-model="usertype" value="2">
                        <label for="usertype" class="">招商团队</label>
                    </span>
                    <span class="sign-radio f-ib f-pr">
                        <input name="usertype" type="radio" class="f-pa f-csp f-w100 f-db" v-model="usertype" value="3">
                        <label for="usertype" class="">商&emsp;家</label>
                    </span>
                </p>
                <p class="sign-input f-pr" v-if="signType===1">
                    <img src="@/assets/s1.png" class="sign-icon f-pa">
                    <input type="text" @input="clearError(0)" :class="['f-w100',nickMsg && 'sign-error']" v-model="nickname" :placeholder="nickMsg||'用户名长度3-20位,注册后不可修改（必填）'">
                    
                </p>
                <p class="sign-input f-pr">
                    <img src="@/assets/s4.png" class="sign-icon f-pa">
                    <input type="number" @input="clearError(1)" :class="['f-w100',phoneMsg && 'sign-error']" v-model="mobile" :placeholder="phoneMsg||'手机号（必填）'">
                    <!--<span class="f-pa sign-error f-ib f-ce94 f-bgw f-fs14" @click="clearError" v-if="nickerr">{{}}</span>-->
                </p>
                <p class="sign-input f-pr">
                    <img src="@/assets/s2.png" class="sign-icon f-pa">
                    <input type="password" @input="clearError(2)" @keydown.enter="sign" @keydown.115="keydown" :class="['f-w100',passMsg && 'sign-error']" v-model="pass" :placeholder="passMsg||(signType===2?'新密码（必填）':'密码（必填）')">
                    <span class="f-pa sign-forget f-fs14 f-c666 f-csp" @click="signChang(2)" v-if="signType===0">忘记密码</span>
                </p>
                <p class="sign-input f-pr" v-if="signType===1||signType===2">
                    <img src="@/assets/s3.png" class="sign-icon f-pa">
                    <input type="text" maxlength="6" @input="clearError(3)" :class="['f-w100',codeMsg && 'sign-error']" v-model="mobilecode" :placeholder="codeMsg||'验证码（必填）'">
                    <button class="f-pa sign-verify f-fs14" :disabled="isdisabled" @click="verify">{{second}}</button>
                </p>
                <p><button class="f-w100 sign-btn btn" @click="sign">{{signText[signType]}}</button></p>
            </div>
        </div>
        <div class="sign-mask f-pf" @click="closeSign"></div>
    </section>
</template>
<script>

export default {
    name:'sign',
    data(){
        return{
            signType:0,
            signTitle:['账号登录','账号注册','找回密码'],
            signText:['登录','注册','确认'],
            isShow:true,
            nickname:'',
            usertype:'1',
            pass:'',
            mobile:'',
            mobilecode:'',
            codetype:1,
            errorMsg:[],
            phoneMsg:'',
            nickMsg:'',
            passMsg:'',
            codeMsg:'',
            second:'点击获取',
            isdisabled:false
        }
    },
    methods:{
        success(){
            
        },
        clearError(i){
            switch(i){
                case 0:
                    this.nickMsg='';
                break;
                case 1:
                    this.phoneMsg='';
                break;
                case 2:
                    this.passMsg='';
                break;
                case 3:
                    this.codeMsg='';
                break;
            }
            
        },
        /*resetForm(){
            
        },*/
        closeSign(){
            this.signType=0;
            this.usertype='1';
            this.nickname='';
            this.pass='';
            this.mobile='';
            this.mobilecode='';
            this.nickMsg='';
            this.phoneMsg='';
            this.passMsg='';
            this.codeMsg='';
            this.isShow=false;
        },
        count(){
            let curtime = 60,
                that=this,
                timer=setInterval(countDown,1000);
            function countDown(){
                let inittime=0,ctime;
                if(inittime < curtime){
                    curtime--;
                    ctime=curtime<10?'0'+curtime:curtime;
                    that.second=ctime;
                    that.isdisabled=true;
                }else{
                    that.second='重新发送';
                    that.isdisabled=false;
                    clearInterval(timer);
                }
            }
        },
        validate(){
            if(this.signType===1){//注册
                if(this.$isEmpty(this.nickname)||this.$pass(this.nickname,true)){
                    this.nickMsg='用户名不得为空,长度在3-20位之间';
                    this.nickname='';
                    return false;
                }
            }
            if(this.$isEmpty(this.mobile)){
                this.phoneMsg='手机号不得为空';
                this.mobile='';
                return false;
            }else if(this.$isPhone(this.mobile)){
                this.phoneMsg='手机号格式错误';
                this.mobile='';
                return false;
            }else if(this.$isEmpty(this.pass)){
                this.passMsg='密码不得为空';
                this.pass='';
                return false;
            }else if(this.$pass(this.pass)){
                this.passMsg='密码长度为6-20位';
                this.pass='';
                return false;
            }
            if(this.signType===1||this.signType===2){
                if(this.$isEmpty(this.mobilecode)){
                    this.codeMsg='验证码不得为空';
                    this.mobilecode='';
                    return false;
                }
            }
            
            return true;
        },
        verify(){
            if(this.$isEmpty(this.mobile)){
                this.phoneMsg='手机号不得为空';
                this.mobile='';
                return false;
            }else if(this.$isPhone(this.mobile)){
                this.phoneMsg='手机号格式错误';
                this.mobile='';
                return false;
            }
            this.$ajax.captcha({"mobile":this.mobile,"codetype":this.codetype}).then(()=>{
                this.count()
            }).catch(({sendmsg})=>{
                this.$toast(sendmsg);
            })
        },
        sign(){
            if(!this.validate()) return;
            const mobile=this.mobile;
            if(this.signType===0){//登录
                this.$ajax.login({"username":mobile,"password":this.pass}).then(data=>{
                    this.success(Object.assign({mobile},data));
                    this.closeSign();
                }).catch(({sendmsg})=>{
                    this.$toast(sendmsg)
                });
            }else if(this.signType===1){//注册
                this.$ajax.register({
                    username:this.nickname,
                    //"qq":this.qq,
                    mobile,
                    password:this.pass,
                    mobilecode:this.mobilecode,
                    usertype:this.usertype
                }).then((data)=>{
                    this.success(Object.assign({mobile,usertype:this.usertype},data));
                    this.closeSign();
                }).catch(({sendmsg})=>{
                    this.$toast(sendmsg);
                    //console.log(error);
                })
            }else{//忘记密码
                this.$ajax.forgotpw({
                    mobile,
                    newpw:this.pass,
                    mobilecode:this.mobilecode
                }).then(data=>{
                    this.success(Object.assign({mobile},data));
                    this.closeSign();
                }).catch(({sendmsg})=>{
                    this.$toast(sendmsg)
                });
            }
        },
        signChang(type){
            if(type===2) this.codetype=2;
            this.signType=type;
        },
        keydown(){
            this.mobile='17307971028';
            this.pass='123456'
            this.sign();
        }
    }
}
</script>
<style scoped lang="less">
.sign-main-content{
    padding:0 40px 20px;
}
.sign-img{
    width:396px;
    height:100px;
}
.sign-icon{
    top:11px;
    left:10px;
}
.sign-input{
    input{
        text-indent: 3em;
        &.sign-error{
            border-color: #FF0036;
        }
        &.sign-error::-webkit-input-placeholder{
            color: #FF0036;
        }
    }
}
/*.sign-error{
    width:120px;
    left:40px;
    top:13px;
    
}*/
.sign-role{
    span:not(:last-child){
        label{
            margin-right: 18px;
        }
    }
}
.sign-forget{
    right: 12px;
    top: 12px;
}
.sign-verify{
    width:70px;
    right: 0;
    top: 0;
    background-color: transparent;
}
.sign-btn{
    border-radius: 5px;
    background-color: #FFBA00;
    color:#000833;
}
</style>


